<template>
  <div class="container" ref="container">

  </div>
  <div class="switch-engine-container">

    <div id="switchEngine">
      <button @click="switchCesium">切换Cesium视口</button>
      <button @click="switchUE">切换UE视口</button>
    </div>
    <div id="mark" v-show="show">
      <div id="confirm">
        <div class="title">
          <p>ESSS信令服务器地址：
            <a href="https://www.cesiumlab.com/esss.html" target="_blank">https://www.cesiumlab.com/esss.html</a>
          </p>
        </div>
        <div class="top">
          <label for="uri">服务地址</label>
          <input id="uri" type="text" v-model="uri" @blur="init()" @keydown.enter="init">
          <label for="appid">应用id</label>
          <input id="appid" type="text" v-model="app">
        </div>
        <div class="middle">
          <div v-for="item in list" :key="item.id" @click="selectAPP(item)" :class="{ selected: app === item.id }">
            <img :src="item.thumbnail ? item.thumbnail : './thumbnail/fail.jpg'" width="80" height="80"
              :alt="item.name" />
            <p>{{ item.name }}</p>
          </div>
          <p class="tip" v-if="status && list.length <= 0">暂无实例，请移步到ESSS配置!</p>
          <p class="tip" v-if="!status">请检查ESSS信令服务器是否启动!</p>
        </div>
        <div class="footer">
          <button @click="cancel">取消</button>
          <button @click="confirm">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { getobjm, getSceneObj } from '../scripts/getobjm';
import { ESObjectsManager, ES3DTileset } from 'earthsdk3';

const objm = getobjm();
const container = ref<HTMLDivElement>();
const show = ref(false);
const uri = ref("http://localhost:9007/");
const app = ref("");
const list = ref([]);
const status = ref(false);
const viewerType = ref('Cesium');

const emit = defineEmits(['engine-change']);

nextTick(() => {
  if (!container.value) return;
  createCesiumView()
  //  createUeView()

})

function createCesiumView() {
  const viewer = objm.createCesiumViewer(container.value);
  viewer.ionAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZmQzMDI1OC1kMWYyLTQ1ZjEtYTJmNS0yMjY1ZDcxZjEyOTkiLCJpZCI6NjQ3MTgsImlhdCI6MTYyOTQzNDM5M30.m8vkzG05QiAfe6JQ0XPK8z_6KuUVMf_CoSY-YlMnAIg"
  console.log(viewer);
}


// 创建地球UE
function createUeView() {
  const options = {
    type: "ESUeViewer",
    container,
    options: { uri, app },
  }
  //创建UE视口
  console.log('objm ', objm)
  const viewer = objm.createUeViewer(container.value, uri.value, app.value);

  // 监听视口状态
  viewer.statusChanged.don(status => {
    switch (status) {
      case "Creating":
        console.log("视口正在创建");
        break;
      case "Created":
        console.log("视口已创建");
        break;
    }
  })
}

async function init() {
  try {
    const response = await fetch(`${uri.value}ue/app`);
    const value = await response.text();
    status.value = true;
    list.value = JSON.parse(value).data;
  } catch (error) {
    list.value = [];
    app.value = "";
    status.value = false;
  }
}

function switchUE() {
  if (viewerType.value == 'UE') {
    return;
  }
  init();
  show.value = true;
}

function switchCesium() {
  if (!container.value) {
    alert("未获取到对应的dom元素");
    return;
  }
  if (viewerType.value == 'Cesium') {
    return;
  }
  viewerType.value = 'Cesium'
  objm.switchToCesiumViewer(container.value);
  emit('engine-change', viewerType.value);
}

function confirm() {
  if (!objm) {
    alert("ESObjectManager管理器为空，请检查");
    return;
  }

  if (!container.value) {
    alert("未获取到对应的dom元素");
    return;
  }
  if (!uri) {
    alert("请填写ESSS信令服务器接口服务地址参数uri");
    return;
  }
  if (!app) {
    alert("请填写实例id参数app");
    return;
  }
  if (viewerType.value == 'UE') {
    return;
  }
  viewerType.value = 'UE'
  objm.switchToUEViewer(container.value, uri.value, app.value);

  emit('engine-change', viewerType.value);
  show.value = false;
}

function cancel() {
  show.value = false;
}

function selectAPP(item: any) {
  app.value = item.id;
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

button {
  background: #153651;
  padding-left: 10px;
  padding-right: 10px;
  height: 32px;
  color: #d6deea;
  border: none;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 0px;
}

button:hover {
  background: #3385ff !important;
}

.switch-engine-container {
  background-color: #153651;
  position: absolute;
  left: 400px;
  top: 70px;
  display: inline-block;
  font-family: Arial, sans-serif;
}


.selected {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}


#mark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #282b349f;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#confirm {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 600px;
}

.middle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}

.middle>div {
  cursor: pointer;
  padding: 5px;
  text-align: center;
}

.footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
